<template>
  <div>
    <dialog-table
      ref="selector"
      :request="getList"
      :load="getLoad"
      :request-params="_requestParams"
      :table-column="tableColumns"
      :column-option="{ label: 'couponName', value: 'id' }"
      v-bind="$attrs"
    >
      <template #form>
        <!-- 查询条件 -->
        <j-border>
          <j-form bordered>
            <j-form-item v-if="$utils.isEmpty(requestParams.couponTypes)" label="卡券类型">
              <a-select v-model:value="searchParams.couponTypes" allow-clear>
                <a-select-option
                  v-for="item in $enums.COUPON_TYPE.values()"
                  :key="item.code"
                  :value="item.code"
                  >{{ item.desc }}</a-select-option
                >
              </a-select>
            </j-form-item>
            <j-form-item v-if="$utils.isEmpty(requestParams.couponName)" label="卡券名称">
              <a-input v-model:value="searchParams.couponName" allow-clear />
            </j-form-item>
            <j-form-item v-if="$utils.isEmpty(requestParams.available)" label="状态">
              <a-select v-model:value="searchParams.available" placeholder="全部" allow-clear>
                <a-select-option
                  v-for="item in $enums.AVAILABLE.values()"
                  :key="item.code"
                  :value="item.code"
                  >{{ item.desc }}</a-select-option
                >
              </a-select>
            </j-form-item>
          </j-form>
        </j-border>
      </template>
      <!-- 工具栏 -->
      <template #toolbar_buttons>
        <a-space class="operator">
          <a-button type="primary" @click="$refs.selector.search()">
            <template #icon>
              <SearchOutlined />
            </template>
            查询</a-button
          >
        </a-space>
      </template>
    </dialog-table>
  </div>
</template>

<script>
  import { defineComponent } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import * as api from '@/api/base-data/coupon';

  export default defineComponent({
    name: 'CouponSelector',
    components: { SearchOutlined },
    props: {
      requestParams: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        searchParams: {
          couponTypes: null,
          couponName: '',
          sendWay: null,
          available: this.$enums.AVAILABLE.ENABLE.code,
        },
        tableColumns: [
          {
            field: 'couponType',
            title: '卡券类型',
            minWidth: 100,
            formatter: (data) => {
              return this.$enums.COUPON_TYPE.getDesc(data.cellValue);
            },
          },
          { field: 'couponName', title: '卡券名称', minWidth: 150 },
          {
            field: 'sendWay',
            title: '发放方式',
            width: 100,
            formatter: (data) => {
              return this.$enums.SEND_WAY.getDesc(data.cellValue);
            },
          },
          { field: 'parValue', title: '卡券面值', width: 100, formatter: this.formatAmount },
          { field: 'effectiveDay', title: '有效期', width: 100, formatter: this.formatDay },
          {
            field: 'useCondition',
            title: '使用条件',
            width: 100,
            formatter: this.formatUseCondition,
          },
          {
            field: 'available',
            title: '状态',
            width: 100,
            slots: { default: 'available_default' },
          },
        ],
      };
    },
    computed: {
      _requestParams() {
        return { available: true, ...this.searchParams, ...this.requestParams };
      },
    },
    methods: {
      getList(params) {
        return api.selector({
          ...params,
          available: true,
          ...this.searchParams,
          ...this.requestParams,
        });
      },
      getLoad(ids) {
        if (!ids || ids.length === 0) {
          return Promise.resolve([]);
        }
        return api.loadCoupon(ids);
      },
      // 格式化金额
      formatAmount(data) {
        let num = typeof data === 'number' ? data : data.cellValue;
        return '￥ ' + Number.parseFloat(num || 0).toFixed(2);
      },
      // 格式化百分比
      formatPercentage(data) {
        return Number.parseFloat(data?.cellValue || 0).toFixed(2) + ' %';
      },
      // 格式化日
      formatDay(data) {
        let day = Number.parseFloat(data?.cellValue || 0);
        return day ? day + ' 天' : '永久';
      },
      // 格式化使用条件
      formatUseCondition(data) {
        return data?.cellValue === 0 ? '无限制' : this.formatAmount(data?.cellValue);
      },
    },
  });
</script>

<style lang="less"></style>
